<html>
<head>
    <title>毒鸡汤</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <script type="text/javascript">
        //使用ajax的方式
        function getSentence() {
            //1.创建ajax引擎对象
            var ajax;
            if (window.XMLHttpRequest) { //火狐
                ajax = new XMLHttpRequest();
            } else if (window.ActiveXObject) { //ie
                ajax = new ActiveXObject("Msxm12.XMLHTTP");
            }
            //复写onreadystatement函数
            //readystatement的值改一次，该函数执行一次
            ajax.onreadystatechange = function () {
                //判断ajax状态码
                if (ajax.readyState == 4) {
                    //判断响应状态码s
                    if (ajax.status == 200) {
                        //获取响应内容
                        var result = ajax.responseText;
                        var data = JSON.parse(result)
                       // alert(result);
                        //alert(result);
                        //获取元素对象
                        var div = document.getElementById("showdiv");
                        div.innerHTML ="您得到了第" +data.id+"句毒鸡汤：<br/>"+data.sentence+"<br/>";

                    } else if (ajax.status == 404) {
                        var div = document.getElementById("showdiv");
                        div.innerHTML = "请求资源不存在";
                    } else if (ajax.status == 500) {
                        var div = document.getElementById("showdiv");
                        div.innerHTML = "服务器繁忙";
                    }
                }
            }

            ajax.open("post", "show");
            ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //声明请求内容是键值对，让服务器按键值对解析
            ajax.send(null);
        }
        function getAmount() {
            //1.创建ajax引擎对象
            var ajax;
            if (window.XMLHttpRequest) { //火狐
                ajax = new XMLHttpRequest();
            } else if (window.ActiveXObject) { //ie
                ajax = new ActiveXObject("Msxm12.XMLHTTP");
            }
            //复写onreadystatement函数
            //readystatement的值改一次，该函数执行一次
            ajax.onreadystatechange = function () {
                //判断ajax状态码
                if (ajax.readyState == 4) {
                    //判断响应状态码s
                    if (ajax.status == 200) {
                        //获取响应内容
                        var result = ajax.responseText;
                        //获取元素对象
                        var div = document.getElementById("showdiv2");
                        div.innerHTML ="数据库中已有" +result+"条毒鸡汤。<br/>";

                    } else if (ajax.status == 404) {
                        var div = document.getElementById("showdiv2");
                        div.innerHTML = "请求资源不存在";
                    } else if (ajax.status == 500) {
                        var div = document.getElementById("showdiv2");
                        div.innerHTML = "服务器繁忙";
                    }
                }
            }

            ajax.open("post", "count");
            ajax.setRequestHeader("Content-Type", "text/html;charset=utf-8"); //声明请求内容是键值对，让服务器按键值对解析
            ajax.send(null);
        }
        //访问网页的时候先来一句
        window.onload = function()
        {
            getSentence();
            getAmount();
        }

        function showAddForm(){
            var form =document.getElementById("addForm");
            if(form.style.display =="none"){
                form.style.display=""
            }else{
                form.style.display ="none"
            }
        }
    </script>
</head>
<body>

<h2>毒鸡汤</h2>
<div id="showdiv2">
</div><br/><br/>
<input id="refresh" type="button" value="一句" onclick="getSentence()"><br/><br/>

<input type="button" onclick="showAddForm()" value="添加句子">

<form action="add" method="post" style="display: none" id="addForm">
    <input type="text" name="sentence" />
    <input type="submit" value="提交" />
</form>
<br/><br/>
<a href="/wisdomSentence/allSentence.html" >查看所有句子</a><br/><br/>

<div id="showdiv">

</div>
</body>
</html>
